<template>
    <el-button
            type="primary"
            plain
            icon="el-icon-plus"
           
            @click="handleAdd"
    >新增
    </el-button>
    <!-- 查询结果 -->
    <el-table :data="tcpListData" style="width: 100%">
        <el-table-column label="驱动名称" align="center" prop="driverName"/>
        <el-table-column label="协议类型" align="center">
            <template v-slot="scope">
                <el-select disabled v-model="scope.row.driverType">
                    <el-option
                            v-for="dict in driverTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350px">
            <template v-slot="scope">
                <el-button icon="el-icon-edit"
                           @click="handleUpdate(scope.row)">修改
                </el-button>
                <el-button icon="el-icon-edit"
                           @click="handleConfigure(scope.row)">配置驱动
                </el-button>
                <el-button icon="el-icon-delete"
                           @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <update-driver :title="title" :open="open" :form="form"
                   :driver-type-options="driverTypeOptions"
                   v-on:dialogStatusChanged="changeDialogStatus($event)"></update-driver>
    <!-- 配置TCP驱动 -->
    <configure-tcp-driver :title="configureTcpTitle" :open="configureTcpOpen" :driver-id="configureDriverId"
                          v-on:dialogStatusChanged="changeDialogStatus($event)">
    </configure-tcp-driver>
    <!-- 配置MODBUS驱动 -->
    <configure-modbus-driver :title="configureModbusTitle" :open="configureModbusOpen" :driver-id="configureDriverId"
                             v-on:dialogStatusChanged="changeDialogStatus($event)">
    </configure-modbus-driver>
</template>

<script>
    import updateDriver from './update.vue'
    import configureTcpDriver from './configureTcp.vue'
    import configureModbusDriver from './configureModbus.vue'
    import {getDriverList} from '/src/api/driver/manage'

    export default {
        name: "index",
        components: {updateDriver, configureTcpDriver, configureModbusDriver},
        data() {
            return {
                driverTypeOptions: [],
                tcpListData: [],
                //新增或修改
                open: false,
                title: '',
                form: {},
                //配置驱动的ID
                configureDriverId: 0,
                //配置TCP驱动
                configureTcpOpen: false,
                configureTcpTitle: '',
                //配置MODBUS驱动
                configureModbusOpen: false,
                configureModbusTitle: '',
            }
        },
        created() {
            this.getDicts("driver_type").then(response => {
                this.driverTypeOptions = response.data;
            });
            this.getDriverListByParam()
        },
        methods: {
            getDriverListByParam() {
                getDriverList().then(response => {
                    this.tcpListData = response.data
                })
            },
            handleAdd() {
                this.form = {}
                this.open = true
                this.title = '添加驱动信息'
            },
            handleUpdate(row) {
                this.open = true
                this.form = row
                this.title = '修改驱动信息'
            },
            handleConfigure(row) {
                const driverType = row.driverType
                this.configureDriverId = row.driverId
                if (driverType === "tcp") {
                    this.configureTcpOpen = true
                    this.configureTcpTitle = '配置TCP驱动信息'
                }
                if (driverType === "mqtt") {

                }
                if (driverType === "modbus") {
                    this.configureModbusOpen = true
                    this.configureModbusTitle = '配置MODBUS驱动信息'
                }
            },
            handleDelete(row) {

            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.configureTcpOpen = status
                this.configureModbusOpen = status
                //刷新页面
                this.getDriverListByParam()
            },
        }
    }
</script>

<style scoped>

</style>
